<template>
  <div class="share">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="文章" name="article">
        <Article :activeName="activeName"></Article>
      </el-tab-pane>
      <el-tab-pane label="随记" name="leftRecord">
        <LeftRecord :activeName="activeName"></LeftRecord>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import Article from './c-cnps/article.vue'
import LeftRecord from './c-cnps/left-record.vue'

const activeName = ref('article') // 激活的tabbar

const handleClick = (tab: any) => {
  if (tab.props.label === '文章') {
    activeName.value = 'article'
  } else {
    activeName.value = 'leftRecord'
  }
}
</script>

<style scoped lang="less">
.share {
  .el-tabs {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--bgColorTop);

    :deep .el-tabs__nav-wrap:after {
      background-color: var(--bgColorBase);
    }

    :deep .el-tabs__item {
      color: var(--fontColorBase);
    }

    :deep .is-active {
      color: #409eff;
    }
  }
}
</style>
